<template>
  <div class="dd">
    <Card title="业务介绍">
      <p>网络专线主要有两种信道：</p>
      <p>
        物理专用信道:物理专用信道就是在服务商到用户之间铺设有一条专用的线路，线路只给用户独立使用，其他的数据不能进入此线路，
        而一般的线路就允许多用户共享信道；
      </p>
      <p>
        虚拟专用信道:虚拟专用信道就是在一般的信道上为用户保留一定的带宽，使用户可以独享这部分带宽，就像在公用信道上又开了一个
        通道，只让相应用户使用，而且用户的数据是加密的，以此来保证可靠性与安全性；
      </p>
      <p>
        主要专用线道帧中继（Frame Relay）、数字数据网（DDN Digital Data
        Network）、异步传输模式（ATM Asynchronous Transfer Mode）、
        X.25（分组交换业务网）、第三代ADSL（非对称用户数字链路）、虚拟专用网络（VPN
        Virtual Private Network）以及E1等。
      </p>
    </Card>
    <Card title="基本信息">
      <el-form size="small" inline label-width="120px" :model="formA">
        <el-form-item label="客户名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户所在省">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户所在市">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formA.valE"></el-input>
        </el-form-item>
        <el-form-item label="处理时限">
          <el-date-picker v-model="date" type="date" placeholder="选择日期" />
        </el-form-item>
      </el-form>
    </Card>
    <Card title="业务信息">
      <Table :tableData="tableData" />
    </Card>
    <Card title="资费信息">
      <el-form inline size="small" :model="formC">
        <el-form-item label="资费生效日期">
          <el-select v-model="formC.valA" size="small">
            <el-option label="当日生效" :value="1"> </el-option>
            <el-option label="次日生效" :value="2"> </el-option>
            <el-option label="次月生效" :value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="formC.valB" size="small">
            <el-option label="有限公司一点受理，一点支付" :value="1">
            </el-option>
            <el-option label="有限公司一点受理，分省支付" :value="2">
            </el-option>
            <el-option label="主办省一点受理，一点支付" :value="3"> </el-option>
            <el-option label="主办省一点受理，分省支付" :value="4"> </el-option>
            <el-option label="本省受理，本省支付" :value="5"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约主体">
          <el-select v-model="formC.valC" size="small">
            <el-option label="集团公司" :value="1"> </el-option>
            <el-option label="集团政企分公司" :value="2"> </el-option>
            <el-option label="有限公司" :value="3"> </el-option>
            <el-option label="有限政企分公司" :value="4"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="其他信息">
      <el-form size="small" inline label-width="120px" :model="formD">
        <el-form-item label="受理业务员">
          <el-input v-model="formD.valA"></el-input>
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input v-model="formD.valB"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formD.valC"></el-input>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },

  data() {
    return {
      formA: {
        valA: '光正集团',
        valB: '43245412',
        valC: '河北省',
        valD: '石家庄市',
        valE: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: 1,
        valD: 1
      },
      formC: {
        valA: 1,
        valB: 1,
        valC: 1
      },
      formD: {
        valA: '',
        valB: '',
        valC: ''
      },
      date: new Date(),
      show: false,
      checkedVal: [],
      valGroup: [
        '标准收费',
        '按时收费（每分钟0.1元）',
        '按天计费（每天1元）',
        '包月收费（100元1000分钟）',
        '语音次数限制'
      ],
      checkedValA: [],
      valGroupA: ['集团固话', '多媒体', '语音', '流量'],
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '宽带信息'
          },
          {
            prop: 'colC',
            label: '接入方式'
          },
          {
            prop: 'colD',
            label: '最大延时'
          },
          {
            prop: 'colE',
            label: '最大兆宽'
          }
        ],
        row: [
          {
            colA: '3857',
            colB: '市场部',
            colC: 'CMPP3.0',
            colD: '100MS',
            colE: '300'
          },
          {
            colA: '3858',
            colB: '市场部',
            colC: 'CMPP3.0',
            colD: '100MS',
            colE: '400'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
</style>
